<template>
  <div class="mg-top-16">
    <van-cell-group inset>
      <van-field
        label="账号"
        v-model="state.username"
        required
        placeholder="请输入手机号/工号"
      />
      <van-field
        label="密码"
        v-model="state.password"
        required
        placeholder="请输入密码"
      />
      <div class="forget" @click="onPasswork">忘记密码？</div>
      <div class="mg-top-16 footer">
        <van-button round size="large" type="primary" @click="onLogin">
          登录
        </van-button>
      </div>
    </van-cell-group>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import api from "@/api/login.js";
import { setLoginInfo } from "@/utils/loginInfo.js";

const router = useRouter();
const state = reactive({
  username: "8888",
  password: "1q2w3e",
  socialCodeValid: true,
});

async function onLogin() {
  const res = await api.login(state);
  if (res.code === 0) {
    showToast("登录成功");
    await setLoginInfo(res.data); // 设置登录信息
    router.replace({
      path: "/home",
    });
  }
}
function onPasswork() {
  router.push({
    path: "/passwork",
  });
}
</script>
<style lang="less" scoped>
.forget {
  font-size: 14px;
  margin: 20px 0;
  text-align: right;
  color: var(--button-info-background-color, #1989fa);
}
.footer {
  margin: 20px;
}
</style>
